CSS 的原始碼是由三個主要部分組成：選擇器（Selector）、屬性（Property）和 值（Value）。每個部分的作用如下：

1. 選擇器（Selector）

選擇器用來指定要應用樣式的 HTML 元素。選擇器可以是 HTML 標籤、類別、ID，或更複雜的選擇條件。

常見的選擇器類型：

• 元素選擇器：選擇所有某一類的 HTML 元素。

  p {
      /* 作用於所有 <p> 元素 */
  }

• 類別選擇器：選擇具有特定 class 屬性的元素，使用「.」符號。

  .button {
      /* 作用於 class="button" 的元素 */
  }

• ID 選擇器：選擇具有特定 id 的元素，使用「#」符號。

  #header {
      /* 作用於 id="header" 的元素 */
  }

• 後代選擇器：選擇某個元素內的特定後代元素。

  div p {
      /* 作用於所有在 <div> 內的 <p> 元素 */
  }

2. 屬性（Property）

屬性定義了選擇的 HTML 元素應如何顯示或表現。屬性描述了元素的樣式細節，如顏色、字體大小、寬度等。

常見屬性：

• color：定義文字的顏色。

  color: blue;

• font-size：定義文字的大小。

  font-size: 16px;

• background-color：定義元素的背景顏色。

  background-color: yellow;

• margin：定義元素的外間距。

  margin: 10px;

3. 值（Value）

值是指定給屬性的具體數值或樣式。每個屬性都有一組可接受的值，例如顏色值、像素大小、百分比、或關鍵字等。

常見的值類型：

• 顏色值：可以是關鍵字（如 red）、十六進制（如 #ff0000）、RGB 值（如 rgb(255, 0, 0)）。

  color: red;

• 尺寸值：可以是像素（px）、百分比（%）、em 等單位。

  font-size: 16px;
  width: 50%;

• 關鍵字值：一些屬性會接受預定義的關鍵字值。

  display: block;

範例

完整的 CSS 規則可以是這樣的：

h1 {
    color: blue;            /* 屬性是 color，值是 blue */
    font-size: 24px;        /* 屬性是 font-size，值是 24px */
    text-align: center;     /* 屬性是 text-align，值是 center */
}

在這個例子中，選擇器是 h1，它選擇了所有 標籤。屬性是 color、font-size 和 text-align，分別設定了藍色文字、24px 字體大小，並使文字置中對齊。每個屬性都對應一個值，這些值決定了 HTML 元素應如何呈現。